<template>
  <ConfigProvider :locale="locale">
    <a-layout style="min-height: 100vh">
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
        <Sider />
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="header-container">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        </a-layout-header>
        <a-layout-content>
          <Crumb />
          <Content />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </ConfigProvider>
</template>
<script setup lang="ts">
  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
  import { useStore } from 'vuex';
  import { ref } from 'vue';
  import Sider from '/@/components/layouts/Sidebar.vue';
  import Content from '/@/components/layouts/Main.vue';
  import Crumb from '/@/components/layouts/Crumb.vue';
  import { ConfigProvider } from 'ant-design-vue';
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  const collapsed = ref<boolean>(false);
  const locale = zhCN;
  const store = useStore();
  store.dispatch('loadMenu');
</script>
<style lang="less" scoped>
  .ant-layout-header .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;

    :hover {
      color: #1890ff;
    }
  }

  .logo {
    height: 40px;
    margin: 10px;
  }

  .header-container {
    padding: 0;
    background: #eceff9;
  }
</style>
